<template>
  <div id="todolist">
    <header>
      <div id="form">
        <label for="ToDoList">
          ToDoList
        </label>
        <input type="text" @keyup.enter="submit" name="" id="ToDoList" v-model="value" :style="{
          boxShadow:'0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset'
        }">
      </div>
    </header>
    <section>
      <ul>
        <div>
          <h2>正在进行</h2>
          <span>{{this.$store.getters.len1.list1.length}}</span>
        </div>
        <li :style="{ boxShadow:'0 1px 2px rgb(0 0 0 / 7%)'}" v-for="(item,index) in lists" v-show="item.state == 0">
          <input type="checkbox" @click="change(index)"
                 :checked="item.state !== 0">
          <input class="p" type="text" :value="item.title" :disabled="disabled">
          <a class="btn" @click="del(index)">×</a>
        </li>
      </ul>
      <ul>
        <div>
          <h2>已经完成</h2>
          <span></span>
        </div>
        <li :style="{ boxShadow:'0 1px 2px rgb(0 0 0 / 7%)'}" v-for="(item,index) in lists" v-show="item.state == 1">
          <input type="checkbox" chenked @click="change(index)"
                 :checked="item.state == 1">
          <input class="p1" type="text" :value="item.title" :disabled="disabled">
          <a class="btn" @click="del(index)">×</a>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      disabled: true,
      activeNames: ['1'],
      lists: [],
      value: '',
      check: false,
    };
  },
  // 子组件转换
  components: {},
  // 数据引入
  mounted() {
    this.lists = this.$store.state.lists
    console.log(this.$store.state.lists.length)
  },
  created() {
  },
  //点击函数事件
  methods: {
    ins(index) {
      this.disabled = false
    },
    submit() {
      var obj = {
        state: 0,
        title: this.value,
      }
      this.$store.commit('add', obj)
      console.log(this.value)
    },
    change(index) {
      this.$store.commit('change', index)
    },
    del(index) {
      this.$store.commit('del', index)
    }
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
header {
  width: 100vw;
  height: 50px;
  background: rgba(47, 47, 47, 0.98);

  #form {
    height: 100%;
    line-height: 100%;
    width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-content: center;

    label {
      float: left;
      width: 100px;
      line-height: 50px;
      color: #DDD;
      font-size: 24px;
      cursor: pointer;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    input {
      float: right;
      width: 60%;
      height: 24px;
      margin-top: 12px;
      text-indent: 10px;
      border-radius: 5px;
      border: none;
    }
  }
}

section {
  height: 20vw;
  width: 600px;
  padding: 0 10px;
  margin: 50px auto;

  ul {
    width: 100%;
    margin: 50px 0;

    div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 20px 0;

      h2 {
        font-size: 20px;
        font-weight: 800;
      }

      span {
        padding: 4px 5px 0;
        border-radius: 50%;
        background: #E6E6FA;
        color: #666;
        box-sizing: border-box;
      }
    }

    li {
      height: 32px;
      line-height: 32px;
      background: #fff;
      position: relative;
      margin-bottom: 10px;
      padding: 0 45px;
      border-radius: 3px;
      border-left: 5px solid #629A9C;
      display: flex;
      flex-direction: row;
      align-items: center;

      input {
        flex: 1;
        width: 20vw;
        display: block;
      }

      .p {
        flex: 8;
        text-align: left;
        height: 20px;
      }

      .p1 {
        flex: 8;
        text-align: left;
        background: none;
        border: none;
      }

      .btn {
        display: block;
        flex: 1;
        line-height: 20px;
        border-radius: 50%;
      }

    }
  }
}
</style>